// main.js
import React, { useEffect, useState } from 'react';
import { Input, Divider, List, Button, Select, Pagination, Modal, Popconfirm } from 'antd';
import { convertISODateTimeToYYYYMMDDHHMM, dealnullorundenfined, fetchsync_util, openNotification_util } from '../util/util.js'
import { useHistory } from 'react-router-dom';
import moment from 'moment'
import 'moment/locale/zh-cn'
import { useLatest } from 'ahooks';
moment.locale('zh-cn')
const { Search } = Input;
var storage = window.localStorage;
const { Option } = Select;

const Normalitemonedjzt = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var checkkey = props.checkkey
  return (

    <div style={styles.listitemnormal}>
      <div style={{ width: "94%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left" }}>
        &nbsp;<span style={{ fontWeight: "500" }}>{props.label}</span>&nbsp;：&nbsp;
        <span style={{ color: fitem[checkkey] !== "未选择" ? "#13A713" : "#F61056", fontWeight: "800" }}>{fitem[fkey]}</span></div>
    </div>
  )
}

const Normalitemone = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  return (
    <div style={styles.listitemnormal}>
      <div style={{ width: "100%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left" }}>
        &nbsp;{props.label}&nbsp;:&nbsp;{fitem[fkey]}</div>
    </div>
  )
}

const Normalitemtwo = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var fkeytwo = props.keydtwo
  return (
    <div style={styles.listitemnormal}>
      <div style={styles.listitemleft}>
        &nbsp;&nbsp;{props.label}:&nbsp;&nbsp;

        <span style={{ fontWeight: "800", color: fitem[fkey] == '不合格' ? 'red' : 'green' }}>
          {fitem[fkey]}</span></div>
      <div style={{ width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" }}>
        {props.labeltwo}:&nbsp;&nbsp;{fitem[fkeytwo]}&nbsp;&nbsp;</div>
    </div>

  )

}

const Mobile_cgrk_llj = () => {
  const history = useHistory();
  //收料报检单明细列表
  const [sltzdMxList, setSltzdMxList] = useState([])
  //收料报检单主表对象
  const [sltzd, setSltzd] = useState({})
  //当前选择明细对象
  const [selectSltzdMx, setSelectSltzdMx] = useState({})

  //查询收料报检单详情
  const querySltzdMxByMainid = async (id) => {
    const url = "/admin/cggl/query_sltzd_byid"
    let param = { id };
    let rtdata = await fetchsync_util(url, 'POST', param, "json")
    setSltzdMxList(rtdata.resultdata.mxdata)
  }

  useEffect(() => {
    var preobj = JSON.parse(storage.preitem_cgrk)

    setSltzd(preobj)
    // querycgrkzjmxbysltzdh(preobj.djbh,preobj.wlbm)
    querySltzdMxByMainid(preobj.id)
    // handleCgrkd(pagedata)
  }, [])

  //路由跳转
  const tonormal = (route) => {
    history.push({ pathname: route });
  }


  //监听pagesize变化
  const onShowSizeChange = () => {

  }

  return (

    <div style={{ height: "100vh", width: "100%", position: 'relative', backgroundColor: "#F1F1F1",overflowX:"hidden"}}>

      <div style={{
        width: "99vw", height: "50vw", backgroundImage: "linear-gradient(to bottom, #091dd4 , #1f8ddc)",
        position: "relative", fontSize: "0.9rem",  fontWeight: "500", color: "white", borderRadius: "0 0 0.5vw 0.5vw"
      }} >
        <br />&nbsp;&nbsp;&nbsp;&nbsp;来料检
        <Button type="primary" style={{
          width: "30%", height: "18%",
          borderRadius: "1rem",
          position: "absolute", backgroundColor: "rgba(0,0,0,0.1)", right: "35%", top: "5%"
        }}
          onClick={() => { tonormal('/qb/cgrk/mobile_sltzd_llj') }}>返回列表
        </Button>
        <Button type="primary" style={{
          width: "15%", height: "18%",
          borderRadius: "1rem",
          position: "absolute", backgroundColor: "rgba(0,0,0,0.1)", right: "3%", top: "5%"
        }}
          onClick={() => { tonormal('/mobile_login') }}>登出
        </Button>
        <Button type="primary" style={{
          width: "15%", height: "18%",
          borderRadius: "1rem",
          position: "absolute", backgroundColor: "rgba(0,0,0,0.1)", right: "20%", top: "5%"
        }}
          onClick={() => { tonormal('/shipSRM_mobile/mobile_mainpage') }}>首页
        </Button>
      </div>
      <div style={{
        width: "96vw", position: "relative", marginTop: "-24vw", marginLeft: "2vw", backgroundColor: "white", height: "",
        borderRadius: "10px", borderStyle: "solid", borderWidth: "0.5vw", borderColor: "rgba(233,233,233,0.9)",
        color: "black", boxShadow: "1px 1px 10px #A0A0A0", marginBottom:"1vh"
      }}>

        <div style={{ width: "100%", height: "1.6rem", position: "relative", fontSize: "1rem", lineHeight: "1.6rem", marginBottom: "0.5rem", paddingBottom: "0.5rem" }}>
          <div style={{ width: "90%", height: "100%", position: "absolute", left: "6%", top: "0.2rem", textAlign: "left", marginBottom: "0.2rem", paddingBottom: "0.5rem", borderBottom: "3px solid #E0E0E0" }}>
            <span style={{ fontWeight: "800" }}>收料报检单号：</span>{sltzd.djh}
          </div>
        </div>
        <Normalitemone label="供应商名称" keyd="gysmc" item={sltzd} />
        {/* <Normalitemonedjzt label="发货单号" keyd="xtckdh" checkkey="djzt" item={preobj} /> */}
        <Normalitemonedjzt label="单据日期" keyd="djrq" checkkey="wlbm" item={sltzd} />

        <Divider style={{ fontWeight: "800", color: "#279B74" }}>来料检验明细</Divider>

        <div style={{ width: "100%", height: "2.0rem", position: "relative" }}>
          <div style={{ width: "29%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem", fontSize: "0.8rem" }}>
            <span style={{ color: "red" }}>*</span><span style={{ fontWeight: "500" }}>规格型号</span> </div>
          <div style={{ width: "65%", height: "100%", position: "absolute", right: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem" }}>
            <Input style={{ width: "95%" }}
              placeholder="请输入规格型号" value={selectSltzdMx.ggxh} disabled
              onChange={(e) => setSelectSltzdMx({ ...selectSltzdMx, llph: e.target.value })} />
          </div>
        </div>


        <div style={{ width: "100%", height: "2.0rem", position: "relative" }}>
          <div style={{ width: "29%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem", fontSize: "0.8rem" }}>
            &nbsp;&nbsp;<span style={{ fontWeight: "500" }}>物料编码</span> </div>
          <div style={{ width: "65%", height: "100%", position: "absolute", right: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem" }}>
            <Input style={{ width: "95%" }}
              placeholder="请输入物料编码" value={selectSltzdMx.wlbm} disabled
              onChange={(e) => setSelectSltzdMx({ ...selectSltzdMx, wlbm: e.target.value })} />
          </div>
        </div>


        <div style={{ width: "100%", height: "2.0rem", position: "relative" }}>
          <div style={{ width: "29%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem", fontSize: "0.8rem" }}>
            &nbsp;&nbsp;<span style={{ fontWeight: "500" }}>物料名称</span> </div>
          <div style={{ width: "65%", height: "100%", position: "absolute", right: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem" }}>
            <Input style={{ width: "95%" }}
              placeholder="请输入物料名称" value={selectSltzdMx.wlmc} disabled
              onChange={(e) => setSelectSltzdMx({ ...selectSltzdMx, wlmc: e.target.value })} />
          </div>
        </div>


        <div style={{ width: "100%", height: "2.0rem", position: "relative" }}>
          <div style={{ width: "29%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem", fontSize: "0.8rem" }}>
            <span style={{ color: "red" }}>*</span><span style={{ fontWeight: "500" }}>检测结果</span> </div>
          <div style={{ width: "65%", height: "100%", position: "absolute", right: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem" }}>
            <Select style={{ width: "95%" }} options={[{ value: '合格', label: '合格', }, { value: '不合格', label: '不合格', }]}
              placeholder="请选择检测结果" value={selectSltzdMx.jcjg}
              onChange={(value) => setSelectSltzdMx({ ...selectSltzdMx, jcjg: value })} />
          </div>
        </div>


        <div style={{ width: "100%", height: "2.0rem", position: "relative" }}>
          <div style={{ width: "29%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem", fontSize: "0.8rem" }}>
            &nbsp;&nbsp;<span style={{ fontWeight: "500" }}>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</span> </div>
          <div style={{ width: "65%", height: "100%", position: "absolute", right: "6%", top: "0", textAlign: "left", lineHeight: "2.0rem" }}>
            <Input style={{ width: "95%" }}
              placeholder="请输入备注" value={selectSltzdMx.bz}
              onChange={(e) => setSelectSltzdMx({ ...selectSltzdMx, bz: e.target.value })} />
          </div>
        </div>

        <div style={{ width: "100%", height: "1.9rem", position: "relative", marginTop: "0.3rem", lineHeight: '1.9rem' }}>
          <Button type="primary" style={{ marginLeft: '6vw', width: "36%", borderRadius: "3px" }} onClick={confirm}>修改</Button>
        </div>
        <div style={{ height: "1vw" }}> </div>
        <div style={styleobj.linestyle}>
          <div style={styleobj.lineleft}><a style={{ color: "red" }}></a>&nbsp;检验明细列表</div>
        </div>
        <div style={{ width: "90vw", height: "", backgroundColor: "#FFFFFF", marginLeft: "2.5vw"}}>
          <List
            itemLayout="horizontal"
            dataSource={sltzdMxList}
            renderItem={(item, index) => (
              <div style={{
                height: "10rem", width: "100%", backgroundColor: "white", marginTop: "5px", position: "relative",
                fontWeight: "400", fontSize: "0.72rem", borderRadius: "5px",  textAlign: 'left', lineHeight: "0.9rem",
                borderStyle: "solid", borderWidth: "0.05rem", borderColor: "#E9E9E9"
              }}>
                <div style={{ width: "100%", height: "1.1rem", position: "relative", marginTop: "0.4rem" }}>
                  <div style={{ width: "50%", height: "100%", position: "absolute", left: "6%", top: "0", textAlign: "left", fontWeight: "700", color: "#4A94F0" }}>
                    &nbsp;&nbsp;序号：{index + 1}
                  </div>
                  <div style={{ width: "40%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" }}>
                    <span style={{ fontWeight: "bolder" }}></span>&nbsp;&nbsp;</div>
                </div>
                <Normalitemone label="规格型号" keyd="ggxh" item={item} />
                <Normalitemone label="物料编码" keyd="wlbm" item={item} />
                <Normalitemone label="物料名称" keyd="wlmc" item={item} />
                <Normalitemtwo label="检测结果" keyd="jcjg" labeltwo="检验员" keydtwo="iqc" item={item} />

                <Normalitemone label="备注" keyd="bz" item={item} />
                <div style={{
                  width: "16%", backgroundColor: "white", fontWeight: "400", lineHeight: "0.8rem", textAlign: "center",
                  wordWrap: "break-word", textIndent: "0", margin: "1px"
                }}>
                  <Button onClick={() => { }} style={{
                    marginLeft: "1.2rem", backgroundColor: "#ff4d4f", lineHeight: "0.6rem"
                    , height: "1.3rem", fontSize: "0.65rem", fontWeight: "400", color: "white"
                  }}>加载</Button>
                </div>
              </div>

            )}
          />
          <div style={{ height: "0.2rem",marginBottom:"1vh"}}></div>
          <Pagination defaultCurrent={1} total={sltzdMxList.length}
            onChange={onShowSizeChange} current={sltzdMxList.current}
            size="small"
          />
        </div>
      </div>
    </div>

  );


}


export default Mobile_cgrk_llj
var styleobj = {
  linestyle: { height: "1.8rem", fontSize: "0.7rem", position: "relative", width: "100%", textIndent: "1rem" },
  lineleft: { width: "100%", height: "100%", position: "absolute", left: "0%", textAlign: "left", lineHeight: "2rem", fontSize: "0.75rem", fontWeight: "700" }
}

var styles = {
  topliststyle: {
    height: "8.2rem", width: "100%", backgroundColor: "white", marginTop: "5px", position: "relative",
    fontWeight: "400", fontSize: "0.72rem", borderRadius: "5px", overflow: "hidden", textAlign: 'left', lineHeight: "0.9rem",
    borderStyle: "solid", borderWidth: "0.05rem", borderColor: "#E9E9E9"
  },
  listitemnormal: { width: "100%", height: "1.1rem", position: "relative" },
  listitemleft: { width: "50%", height: "100%", position: "absolute", left: "4.5%", top: "0", textAlign: "left" }
}


